<template>
  <el-form-item :rules="item.Rules" :label="item.label" :prop="item.key" :required="item.required">
    <template slot="label">
      {{ item.label }}
      <el-tooltip class="item" effect="dark" placement="top" v-if="item.tips">
        <div slot="content">{{ item.tips }}</div>
        <i class="el-icon-warning-outline"></i>
      </el-tooltip>
    </template>
    <el-input
      v-if="item.type === 'input'"
      v-bind="$attrs"
      v-on="$listeners"
      :type="item.subtype"
      :placeholder="item.placeholder || `请输入${item.label}`"
      :disabled="item.disable"
      :readonly="item.readonly"
      :autosize="item.autosize"
    >
      <el-color-picker
        v-if="item.key === 'bgColor' || item.key === 'bgColor2'"
        v-bind="$attrs"
        v-on="$listeners"
        slot="suffix"
      ></el-color-picker>
    </el-input>
    <el-switch
      v-else-if="item.type === 'switch'"
      v-bind="$attrs"
      v-on="$listeners"
      :disabled="item.disabled"
    ></el-switch>
    <el-select
      v-else-if="item.type === 'select'"
      v-bind="$attrs"
      v-on="$listeners"
      :multiple="item.multiple"
      :disabled="item.disabled"
      :multiple-limit="item.multipleLimit"
      :placeholder="item.placeholder || `请选择${item.label}`"
    >
      <el-option
        v-for="o in item.options"
        :key="o.value"
        :label="o.label"
        :value="o.value"
        :disabled="o.disabled"
      ></el-option>
    </el-select>
    <el-radio-group
      v-else-if="item.type === 'radio'"
      v-bind="$attrs"
      v-on="$listeners"
      :disabled="item.disabled"
      v-model="item.value"
    >
      <el-radio v-for="o in item.options" :key="o.value" :label="o.value">{{ o.label }}</el-radio>
    </el-radio-group>
    <el-checkbox-group
      v-else-if="item.type === 'checkbox'"
      v-bind="$attrs"
      v-on="$listeners"
      v-model="item.value"
      :disabled="item.disabled"
    >
      <el-checkbox v-for="o in item.options" :key="o.value" :label="o.value">
        {{ o.label }}
      </el-checkbox>
    </el-checkbox-group>
    <div v-else-if="item.type === 'img' || item.type === 'img-only'" class="img-item">
      <img :src="$attrs.value" v-if="$attrs.value" />
      <el-input
        v-bind="$attrs"
        v-on="$listeners"
        :placeholder="item.placeholder || `图片地址,可以修改`"
      ></el-input>
      <div class="img-btn-box" v-if="item.type === 'img'">
        <upload-resource is-public @upload="setImgUrl" folder="channel"></upload-resource>
        <el-button @click="delimg" type="text" class="danger-text" v-if="$attrs.value">
          删除图片
        </el-button>
      </div>
    </div>
    <el-select
      value-key="nickname"
      v-else-if="item.type === 'teacher'"
      filterable
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-option
        v-for="(t, index) in $teacherList"
        :key="index"
        :label="t.nickname"
        :value="t"
      ></el-option>
    </el-select>
    <el-select
      value-key="label"
      v-else-if="item.type === 'appScheme'"
      filterable
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-option
        v-for="(p, index) in item.options"
        :key="index"
        :label="p.label"
        :value="p"
      ></el-option>
    </el-select>

    <el-date-picker
      v-else-if="item.type === 'datetime'"
      v-bind="$attrs"
      v-on="$listeners"
      type="datetime"
      :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
      :value-format="item.valueFormat || 'timestamp'"
      :clearable="item.clearable || true"
      :default-time="item.defaultTime"
      :placeholder="item.placeholder || `请选择${item.label}`"
    ></el-date-picker>
    <span v-else-if="item.type === 'text'">{{ $attrs.value }}</span>
    <span v-else>未知控件类型:{{ item.type }}</span>
  </el-form-item>
</template>
<script>
  import { mapGetters } from 'vuex';
  import UploadResource from './UploadResource';
  export default {
    components: {
      UploadResource,
    },
    props: {
      item: {
        type: Object,
        required: true,
      },
    },
    computed: {
      ...mapGetters(['$teacherList']),
    },
    data() {
      return {};
    },
    methods: {
      setImgUrl(img) {
        this.$emit('input', img.url);
      },
      delimg() {
        this.$emit('input', '');
      },
    },
  };
</script>
<style lang="less" scoped>
  .img-item {
    img {
      border: 1px solid #d3d4d6;
      max-width: 600px;
      max-height: 200px;
    }
  }
  .img-btn-box {
    display: flex;
    margin-top: 5px;
    .el-button {
      margin-left: 5px;
    }
  }
</style>
